<template>
  <div>
    <div class="content">
      <!-- 操作按钮 -->
      <div class="flex gap-2">
        <el-button type="primary">
          <el-icon>
            <Plus />
          </el-icon>
          <span>新增</span>
        </el-button>
        <el-button type="success" :disabled="selectedClueIds.length != 1">
          <el-icon>
            <Edit />
          </el-icon>
          <span>修改</span>
        </el-button>
        <el-button type="danger" :disabled="selectedClueIds.length == 0">
          <el-icon>
            <Delete />
          </el-icon>
          <span>删除</span>
        </el-button>

        <el-button type="warning" :disabled="selectedClueIds.length == 0">
          <el-icon>
            <Download />
          </el-icon>
          <span>导出</span>
        </el-button>
      </div>
    </div>

    <div>
      <el-tag type="primary" style="border-radius: 5px; margin-left: 20px">待处理任务列表</el-tag>
      <el-table :data="unapproveList" @select="handleSelectionChange" @select-all="handleSelectAll" reserve-selection
        style="margin-left: 20px">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="name" label="客户姓名" width="120" align="center" />
        <el-table-column prop="phone" label="手机号码" width="120" align="center" />
        <el-table-column prop="channelName" label="渠道名称" width="120" align="center" />
        <el-table-column prop="activityName" label="活动名称" width="120" align="center" />
        <el-table-column prop="courseName" label="课程名称" width="120" align="center" />
        <el-table-column prop="contractPrice" label="合同金额" width="120" align="center" />
        <el-table-column fixed="right" label="操作" align="center" min-width="150px">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handInfo(scope.row)">
              <el-icon>
                <View />
              </el-icon>查看
            </el-button>
            <el-button link type="primary" size="small">
              <el-icon>
                <Document />
              </el-icon>预览
            </el-button>
            <el-button link type="primary" size="small"><el-icon>
                <TopRight />
              </el-icon>审批</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-tag type="success" style="border-radius: 5px; margin-left: 20px">已提交未审批任务列表</el-tag>
      <el-table :data="committedList" @select="handleSelectionChange" @select-all="handleSelectAll" reserve-selection
        style="margin-left: 20px">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="name" label="客户姓名" width="120" align="center" />
        <el-table-column prop="phone" label="手机号码" width="120" align="center" />
        <el-table-column prop="channelName" label="渠道名称" width="120" align="center" />
        <el-table-column prop="activityName" label="活动名称" width="120" align="center" />
        <el-table-column prop="courseName" label="课程名称" width="120" align="center" />
        <el-table-column prop="contractPrice" label="合同金额" width="120" align="center" />
      </el-table>
      <!-- 分页组件 -->
      <!-- <pagination v-show="total > 0" page=1 limit=10
                    :total="total" @pagination="getInfo" class="page-box" /> -->
    </div>

    <div>
      <el-tag type="danger" style="border-radius: 5px; margin-left: 20px">审批完成任务列表</el-tag>
      <el-table :data="approveList" @select="handleSelectionChange" @select-all="handleSelectAll" reserve-selection
        style="margin-left: 20px">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="name" label="客户姓名" width="120" align="center" />
        <el-table-column prop="phone" label="手机号码" width="120" align="center" />
        <el-table-column prop="channelName" label="渠道名称" width="120" align="center" />
        <el-table-column prop="activityName" label="活动名称" width="120" align="center" />
        <el-table-column prop="courseName" label="课程名称" width="120" align="center" />
        <el-table-column prop="contractPrice" label="合同金额" width="120" align="center" />
        <el-table-column fixed="right" label="操作" align="center" min-width="150px">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handInfo(scope.row)">
              <el-icon>
                <View />
              </el-icon>查看
            </el-button>
            <el-button link type="primary" size="small">
              <el-icon>
                <Document />
              </el-icon>预览
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-model="dialogFormVisible" title="合同详情" width="684">
      <div class="form-info">
        <div class="info">
          <label for="">合同编号</label>
          <span>{{ contractList.contractId }}</span>
        </div>
        <div class="info">
          <label for="">客户手机号码</label>
          <span>{{ contractList.phone }}</span>
        </div>
        <div class="info">
          <label for="">客户姓名</label>
          <span>{{ contractList.name }}</span>
        </div>
        <div class="info">
          <label for="">课程分类</label>
          <span>{{ getStatusLabel(contractList.status) }}</span>
        </div>
        <div class="info">
          <label for="">课程名</label>
          <span>{{ contractList.courseName }}</span>
        </div>
        <div class="info">
          <label for="">渠道名称</label>
          <span>{{ contractList.channelName }}</span>
        </div>
        <div class="info">
          <label for="">活动名称</label>
          <span>{{ contractList.activityName }}</span>
        </div>
        <div class="info">
          <label for="">合同状态</label>
          <span>{{ getContractStatusLabel(contractList.status) }}</span>
        </div>
        <div class="info">
          <label for="">合同金额</label>
          <span>{{ contractList.contractPrice }}</span>
        </div>
        <div class="info">
          <label for="">课程价格</label>
          <span>{{ contractList.coursePrice }}</span>
        </div>
        <div class="info">
          <label for="">折扣类型</label>
          <span>{{ getActivityStatus(contractList.discountType) }}</span>
        </div>
        <div class="info">
          <label for="">合同审批人</label>
          <span>{{ contractList.approveUserName }}</span>
        </div>
      </div>
      <div class="form-btn">
        <el-button type="primary" @click="dialogFormVisible = false"> 确定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { getUnapprove, getCommitted, getApprove, getView, getContractStatus, getActivityType, getCourse } from '@/api/tienchin/contract';

const unapproveList = ref([]);
const approveList = ref([]);
const committedList = ref([]);
const selectedClueIds = ref([]);
const total = ref(0);
const dialogFormVisible = ref(false);
const contractList = ref([]);
const contractStatus = ref([]);
const activityStatus = ref([]);
const courseStatus = ref([]);

function getStatusLabel(status: string) {
    const statusObj = courseStatus.value.find(item => item.dictValue == status);
    return statusObj ? statusObj.dictLabel : '';
}
function getContractStatusLabel(status: string) {
    const statusObj = contractStatus.value.find(item => item.dictValue == status);
    return statusObj ? statusObj.dictLabel : '';
}
function getActivityStatus(status: string) {
    const statusObj = activityStatus.value.find(item => item.dictValue == status);
    return statusObj ? statusObj.dictLabel : '';
}





function getInfo() {
  getUnapprove().then(res => {
    console.log(res);
    unapproveList.value = res.rows;
  });

  getCommitted().then(res => {
    console.log(res);
    committedList.value = res.rows;
    total.value = res.total;
  });

  getApprove().then(res => {
    console.log(res);
    approveList.value = res.rows;
  });

  getContractStatus().then(res => {
    console.log(res);
    contractStatus.value = res.data;
  });

  getActivityType().then(res => {
    console.log(res);
    activityStatus.value = res.data;
  });

  getCourse().then(res => {
    console.log(res);
    courseStatus.value = res.data;
  });
}

function handInfo(row) {
  console.log(row.contractId);
  dialogFormVisible.value = true;

  getView(row.contractId).then(res => {
    console.log(res);
    contractList.value = res.data;
    console.log(contractList.value);
  });
}

function handleSelectionChange(selection) {
  console.log(selectedClueIds.value.length);

  if (selection.length) {
    // 如果有选中的项，则更新selectedClueIds
    selectedClueIds.value = selection.map(item => item.clueId);
  } else {
    // 如果没有选中的项，则清空selectedClueIds
    selectedClueIds.value = [];
  }
  console.log(selectedClueIds.value);
  console.log(selectedClueIds);
}
function handleSelectAll(selection) {
  if (selection.length) {
    // 如果有选中的项，则将所有clueId添加到selectedClueIds
    selectedClueIds.value = selection.map(item => item.clueId);
  } else {
    // 如果没有选中的项，则清空selectedClueIds
    selectedClueIds.value = [];
  }
  console.log(selectedClueIds.value);
}

onMounted(() => {
  getInfo();
});
</script>
<style scoped lang="scss">
.content {
  margin: 20px;
}

.form-info {
  display: flex;
  flex-wrap: wrap;
}

.info {
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  margin: 10px 40px;

  label {
    color: #000;
    font-weight: bold;
    font-style: italic;
    font-size: 14px;
  }
}
.form-btn{
  display: flex;
  justify-content: end;
}
</style>
